<template>
    <div id="setting">
        <app-header></app-header>
        <div class="setting">
            <div class="setting-title">
                <h1>账户设置</h1>
            </div>
            <div class="userMsg">
                <form action="" enctype="multipart/form-data">
                    <div class="userAvatar">
                        <label for="avatar">
                            <img src="../assets/cat.jpg" v-if="defaultshow">
                            <img :src="dataUrl" v-else-if="!defaultshow">
                        </label>
                        <input type="file" id="avatar" @change="handleFileChange" ref="inputer">
                    </div>
                    <div class="userName">
                        APIS
                    </div>
                    <div class="fromList">
                        <div class="name clearfix">
                            <span class="lf">昵称</span>
                            <input type="text" v-model="userName"  class="from_right gt" >
                        </div>
                        <div class="phone clearfix">
                            <span class="lf">手机号</span>
                            <span class="from_right gt">{{phone}}</span>
                        </div>
                        <div class="password clearfix">
                            <span class="lf">密码</span>
                            <div class="from_right gt clearfix">
                                <span>**********</span>
                                <button type="button" class="changeBtn gt" @click="changeUsermsg">修改</button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</template>
<script>
import Axios from '../api/index'
import Header from "./blueheader";
import {changeMsg} from '../api/example'
export default {
  name:'setting',
  data(){
      return{
            phone:localStorage.newsPhone,
            userName:'',
            dataUrl:'',
            defaultshow:true,
            avatar:'',
            uploadAva:'',
            imgs: [],  
            imgData: {  
                accept: 'image/gif, image/jpeg, image/png, image/jpg',  
            }  
      }
  },
  components:{
    "app-header": Header,
  },
  created:function(){
      this.judge();
      this.myPhone();
  },
  methods:{
      // 判断是否登录
    judge: function() {
      if (localStorage.newstoken != undefined) {
          this.userName=localStorage.newsUsername;
          this.dataUrl = localStorage.newAvatar;
          var str = localStorage.newAvatar;
            var index = str .lastIndexOf("\/");  
            str  = str .substring(index + 1, str .length);
            if(str != "undefined"){
                this.defaultshow = false
            }else{
                this.defaultshow = true
            }
      } else {
        this.defaultshow = true;
      }
    },
    // 隐藏用户手机号中间4位
    myPhone:function(){
        var phone=this.phone;
        var myphone=phone.substr(3, 4);  
        var lphone = phone.replace(myphone, "****");
        this.phone = lphone;
    },
    // 头像预览
    imgPreview (file) {
        let self = this;
        // 看支持不支持FileReader
        if (!file || !window.FileReader) return;

        if (/^image/.test(file.type)) {
            // 创建一个reader
            var reader = new FileReader();
            // 将图片将转成 base64 格式
            reader.readAsDataURL(file);
            // 读取成功后的回调
            reader.onloadend = function () {
                self.dataUrl = this.result;
            }
        }
    },
    handleFileChange (e) {
        this.defaultshow=false;
        let inputDOM = this.$refs.inputer;
        // 通过DOM取文件数据
        this.file  = inputDOM.files[0];
        this.errText = '';

        let size = Math.floor(this.file.size / 1024);
        // 限制上传头像大小为5M
        if (size > 5*1024) {
            // 这里可以加个文件大小控制
            return false
        }

        // 触发这个组件对象的input事件
        this.$emit('input', this.file);
        
        // 这里就可以获取到文件的名字了
        this.fileName = this.file.name;
        
        // 这里加个回调也是可以的
        this.onChange && this.onChange(this.file, inputDOM.value);
        
        // 在获取到文件对象进行预览就行了！
        this.imgPreview(this.file);
        this.avatar = this.file;
        console.log(this.avatar);

    },
    // 修改用户信息
    changeUsermsg(){
        let inputDOM = this.$refs.inputer;
        this.file  = inputDOM.files[0];
        var formdata = new FormData();
        formdata.append('avatar',this.file);
        formdata.append('token',localStorage.newstoken);
        formdata.append('nickname',this.userName);
        Axios.post('/account/detail/change',formdata,{
            headers:{'Content-Type':'multipart/form-data'}
        }).then(res =>{
            localStorage.newsUsername = this.userName;
            localStorage.newAvatar = this.dataUrl;
            this.$router.push({
                name: "userSetting",
            });
            console.log(res.data)
            alert(res.data.message);
            // console.log(this.dataUrl);
        })
    }
  },
}
</script>
<style scoped>
    #setting{
        background: #f9f9f9;
        padding-bottom:200px;
    }
    .setting{
        width:1032px;
        margin-top:83.2px;
        background: #fff;
        box-shadow: 2px 2px 4px 0 rgba(0,0,0,0.11);
    }
    .setting-title{
        padding:23.5px 0;
        border-bottom: 1px solid #DCDCDC;
    }
    .setting h1{
        font-size: 20px;
        color: #333333;
        padding-left:31px;
        border-left:5px solid #0074FF;
        font-weight: bold;
    }

    .userMsg{
        padding:33.4px 0 66.6px;
        text-align: center;
    }
    .userAvatar label img{
        display: inline-block;
        width:104.3px;
        height:104.3px;
        background-size:  100% 100%;
        margin: 0 auto;
    }
    #avatar{
        display:none;
    }
    .userName{
        margin-top: 15.8px;
        font-size: 14px;
        color: #333333;
    }
    .fromList{
        width:377.8px;
        margin-top: 58px;
        font-size: 16px;
        color:#333;
    }
    .fromList span{
        display: inline-block;
    }
    .fromList div{
        margin-bottom:20px;
        line-height: 38px;
    }
    .fromList .from_right{
        width:296px;
        height:38px;
        text-align: left;      
    }
    .fromList input{
        padding-left: 19.5px;  
    }
    .changeBtn{
        width:110px;
        height:38px;
        text-align:center;
        background: #FF8000;
        color:#fff;
        border:none;
    }
</style>
